<template>
	<view :style="{'height':outheight,'overflow':outoverflow}">
		<cu-custom :isBack="true" bgColor="bg-white solids-bottom">
			<block slot="content">
				热文详情
			</block>
		</cu-custom>
		<view class="model-main model">
			<view class="margin-bottom cu-avatar-box">
				<view class="uni-row model-item">
					<view class="uni-flex margin-bottom res">
						<view class="cu-avatar lg round margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
						<view>
							<view class="cu-avatar-name">{{banner.UserName}}</view>
							<view class="cu-avatar-num">
								<text class="margin-right-sm">{{banner.Line1Display}}</text>
								<text class="margin-right-sm">{{banner.CreateTimeDisplay}}</text>
							</view>
							<view class="cu-avatar-btn">
								<button class="cu-btn bg-red margin-tb-sm">关注</button>
							</view>
						</view>
					</view>
					<view class="margin-bottom-sm">
						<view class="margin-bottom-sm solid-bottom text-xxl">
							<text class="text-black text-bold">{{banner.Title}}</text>
						</view>
						<rich-text type="text" :nodes="demoHtml"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<view class="warp30"></view>
		<scroll-view scroll-x class="nav text-left">
			<view class="cu-item" :class="0==TabCur?'cur on':''" :key="0" @tap="tabSelect" :data-id="0">
				评论 3
			</view>
			<view class="cu-item" :class="1==TabCur?'cur on':''" :key="1" @tap="tabSelect" :data-id="1">
				转发 4
			</view>
			<view class="cu-item" style="float:right">
				赞 56
			</view>
		</scroll-view>
		<view class="mb10 YZListBox DK" v-if="0==TabCur">
			<view class="uni-list2">
				<view class="uni-list-cell">
					<view class="uni-list-cell-navigate">
						<view class="cu-avatar lg round margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
						<view class="uni-triplex-left">
						    <text class="uni-title uni-ellipsis">李思思</text>
						    <view class="uni-text-small uni-ellipsis">
								<text class="phone margin-right-sm">向上地产</text>
								<text class="phone margin-right-sm">13228586565</text>
								<text style="float: right;">3小时前</text>
							</view>
						</view>
					</view>
					<view class="DKMsg">
						<view class="DKAdr">
							剑桥大学承认中国高考成绩！考多少分能录取？网友：好激动但是怕有猫腻哇。
						</view>
						<view class="DKTool">
							<view class="DKToolitem" @tap="comment(0)">
								<text class="iconfont">&#xe653;</text>
							</view>
							<view class="DKToolitem on">
								<text class="iconfont">&#xe652;</text>39
							</view>
						</view>
						<view class="post-footer">
							<view class="footer_content">
								<text class="iconfont liked">&#xe652;</text>
								<text class="nickname" v-for="(user,index_like) in like" :key="index_like">{{user.username}}</text>
							</view>
							<view class="footer_content" v-for="(comment,comment_index) in comments.comment" :key="comment_index" @tap="reply(0,comment_index)">
								<text class="comment-nickname">{{comment.username}}: <text class="comment-content">{{comment.content}}</text></text>
							</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell">
					<view class="uni-list-cell-navigate">
						<view class="cu-avatar lg round margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
						<view class="uni-triplex-left">
						    <text class="uni-title uni-ellipsis">李思思</text>
						    <view class="uni-text-small uni-ellipsis">
								<text class="phone margin-right-sm">向上地产</text>
								<text class="phone margin-right-sm">13228586565</text>
								<text style="float: right;">3小时前</text>
							</view>
						</view>
					</view>
					<view class="DKMsg">
						<view class="DKAdr">
							剑桥大学承认中国高考成绩！考多少分能录取？网友：好激动但是怕有猫腻哇。
						</view>
						<view class="DKTool">
							<view class="DKToolitem" @tap="comment(1)">
								<text class="iconfont">&#xe653;</text>
							</view>
							<view class="DKToolitem">
								<text class="iconfont">&#xe652;</text>39
							</view>
						</view>
						<view class="post-footer">
							<view class="footer_content">
								<text class="iconfont liked">&#xe652;</text>
								<text class="nickname" v-for="(user,index_like) in like" :key="index_like">{{user.username}}</text>
							</view>
							<view class="footer_content" v-for="(comment,comment_index) in comments.comment" :key="comment_index" @tap="reply(1,comment_index)">
								<text class="comment-nickname">{{comment.username}}: <text class="comment-content">{{comment.content}}</text></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mb10 YZListBox DK" v-if="1==TabCur">
			<view class="uni-list2">
				<view class="uni-list-cell">
					<view class="uni-list-cell-navigate">
						<view class="cu-avatar lg round margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
						<view class="uni-triplex-left">
						    <text class="uni-title uni-ellipsis">李思思</text>
						    <view class="uni-text-small uni-ellipsis">
								<text class="phone margin-right-sm">向上地产</text>
								<text class="phone margin-right-sm">13228586565</text>
								<text style="float: right;">3小时前</text>
							</view>
						</view>
					</view>
					<view class="DKMsg">
						<view class="DKAdr">
							剑桥大学承认中国高考成绩！考多少分能录取？网友：好激动但是怕有猫腻哇。
						</view>
					</view>
				</view>
				<view class="uni-list-cell">
					<view class="uni-list-cell-navigate">
						<view class="cu-avatar lg round margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
						<view class="uni-triplex-left">
						    <text class="uni-title uni-ellipsis">李思思</text>
						    <view class="uni-text-small uni-ellipsis">
								<text class="phone margin-right-sm">向上地产</text>
								<text class="phone margin-right-sm">13228586565</text>
								<text style="float: right;">3小时前</text>
							</view>
						</view>
					</view>
					<view class="DKMsg">
						<view class="DKAdr">
							转发文章
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="warp30"></view>
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar tabbar bg-white foot">
			<navigator url="/pagesB/news/comment/comment" class="action">
				<view class="iconfont">&#xe653;</view> 评论
			</navigator>
			<view class="action">
				<view class="iconfont">&#xe687;</view> 收藏
			</view>
			<view class="action">
				<view class="iconfont">&#xe652;</view> 点赞
			</view>
			<view class="action" @tap="ZF">
				<view class="iconfont">&#xe6c4;</view> 转发
			</view>
			<view class="action">
				<view class="iconfont">&#xe667;</view> 分享
			</view>
		</view>
		<view class="window-bg" :class="{'on':is_zf}" @tap="RemoveBG" @touchmove.stop.prevent="moveHandle"></view>
		<view class="menu" v-if="is_zf" @touchmove.stop.prevent="moveHandle">
			<navigator url="/pagesB/news/forwarded/forwarded" class="menu-item"><view class="iconfont margin-right-sm">&#xe6c4;</view> 转发</navigator>
			<view class="menu-item"><view class="iconfont margin-right-sm">&#xe668;</view> 转储到个人资料库</view>
		</view>
		<view class="cu-bar tabbar foot" v-show="showInput">
			<chat-input @send-message="send_comment" @blur="blur" :focus="focus" :placeholder="input_placeholder" style="width: 100%;"></chat-input>
		</view>
	</view>
</template>

<script>
	var _self;
	var graceRichText = require("../../../static/richText.js");
	import chatInput from '../../../components/im-chat/chatinput.vue';
	export default {
		data() {
			return {
				banner:{},
				windowHeight: "",
				is_zf:0,
				outheight: "auto",
				outoverflow: "auto",
				TabCur:0,
				demoHtml : '',
				user:{name:'DB'},
				like: [{
						uid: 2,
						username: "小李子"
					},
					{
						uid: 3,
						username: "小张子"
					}
				],
				comments: {
					total: 2,
					comment: [{
							uid: 2,
							username: '小爱',
							content: "加个微信吧!"
						},
						{
							uid: 3,
							username: '小虎',
							content: "一起出去好吗?"
						}
					]
				},
				
				input_placeholder: '评论', //占位内容
				focus: false, //是否自动聚焦输入框
				is_reply: false, //回复还是评论
				showInput: false, //评论输入框
			};
		},
		components: {
			chatInput
		},
		onLoad:function(event){
			try {
				this.banner = JSON.parse(decodeURIComponent(event.detailDate));
			} catch (error) {
				this.banner = JSON.parse(event.detailDate);
			}
			console.info(decodeURIComponent(this.banner.Content));
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.windowHeight = res.windowHeight;
				}
			});
			that.demoHtml = graceRichText.format(decodeURIComponent(this.banner.Content));
			/* // 加载 html 内容
			uni.request({
				url:'http://grace.hcoder.net/richTextDemo.php',
				success:function(res){
					// 强化 richText
					that.demoHtml = graceRichText.format(res.data);
				},
				fail:function(){
					uni.showToast({
						title:'请求失败'
					});
				}
			}); */
		},
		methods:{
			send_comment: function(message) {
				console.info(message);
				if(message.content!=""){
					if (this.is_reply) {
						var reply_username = this.comments.comment[this.comment_index].username;
						var comment_content = '回复' + reply_username + ':' + message.content;
					} else {
						var comment_content = message.content;
					}
					this.comments.total += 1;
					this.comments.comment.push({
						"uid": this.comment_index,
						"username": this.user.name,
						"content": comment_content //直接获取input中的值
					});
				}
				console.info(this.comments);
				this.init_input();
			},
			reply(index, comment_index) {
				this.is_reply = true; //回复中
				this.showInput = true; //调起input框
				let replyTo = this.comments.comment[comment_index].username;
				this.input_placeholder = '回复' + replyTo;
				this.index = index; //post索引
				this.comment_index = comment_index; //评论索引
				this.focus = true;
			},
			init_input() {
				this.showInput = false;
				this.focus = false;
				this.input_placeholder = '评论';
				this.is_reply = false;
			},
			blur: function() {
				console.info(123);
				// #ifdef MP
				this.init_input();
				// #endif
			},
			comment(index) {
				this.showInput = true; //调起input框
				this.focus = true;
				this.index = index;
			},
			tabSelect(e){
				this.TabCur = e.currentTarget.dataset.id;
			},
			ZF(){
				this.is_zf=true;
				this.outheight = "100hv";
				this.outoverflow = "hidden";
			},
			moveHandle: function() {
				console.info("滑不了了");
			},
			RemoveBG: function() {
				this.is_zf=false;
				this.outheight = "auto";
				this.outoverflow = "auto";
			},
		}
	}
</script>

<style lang="less">
	.res{
		position: relative;
	}
	.foot{
		z-index: 5;
	}
	.window-bg {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .3);
		display: none;
		display: none;
	}
	
	.window-bg.on {
		display: block;
	}
	.tabbar{
		.action{
			font-size: 24upx;
			.iconfont{
				font-size: 32upx;
			}
		}
	}
	.menu{
		position: fixed;
		bottom: calc(120upx + env(safe-area-inset-bottom) / 2);
		width: 100vw;
		left: 0;
		text-align: left;
		z-index: 5;
		.menu-item{
			padding: 20upx 30upx;
			box-sizing: border-box;
			background: #ffffff;
			border-bottom:2upx solid #ededed;
			.iconfont{
				display: inline-block;
				font-size: 32upx;
			}
		}
	}
	.nav{
		.cu-item{
			color: #999999;
			&.cur{
				border-color: #ff4a4a;
				color: #333333;
				font-weight: 600;
			}
		}
	}
	.cu-avatar-box{
		.uni-row.model-item{
			padding: 30upx;
			overflow: hidden;
			.cu-avatar-name{
				font-size: 32upx;
				color: #333333;
				line-height: 48upx;
			}
			.cu-avatar-num{
				text{
					font-size: 24upx;
					color: #999999;
					line-height: 48upx;
				}
			}
			.cu-avatar-btn{
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
	}
	.YZListBox{
		
		.article-author{
			padding: 10px 15px;
			margin: 0;
			font-size: 32upx;
			border-bottom: 2upx solid #dadada;
		}
		.YZListBoxIcon{
			line-height: 1;
			padding-right: 20upx;
			.YZListBoxIconImg{
				width: 90upx;
				height:90upx;
				border-radius: 50%;
			}
		}
		.uni-triplex-left{
			flex: 1;
			.phone{
				color:#666666;
				font-size: 24upx;
				margin-left: 10upx;
			}
		}
		.uni-list-cell-navigate.uni-navigate-right:after{
			color:#666666;
			font-size: 40upx;
		}
		.labelBox{
			line-height:1.5;
			border-radius: 10upx;
			margin-right: 10upx;
		}
		&.DK{
			.uni-list-cell{
				display: block;
				padding-bottom: 20upx;
				.YZListBoxIcon{
					.YZListBoxIconImg{
						border-radius:20upx;
					}
				}
				.uni-triplex-left{
					.phone{
						color:#999999;
						font-size: 24upx;
						margin-left: 0;
						margin-right: 20upx;
					}
				}
				.DKMsg{
					padding: 0 30upx;
					.DKMsgBox{
						font-size: 24upx;
						background: #f2f2f2;
						color: #666;
						padding: 10upx;
						margin-bottom: 10upx;
					}
					.DKAdr{
						font-size: 28upx;
						color: #333333;
					}
					.DKTool{
						text-align: right;
						.DKToolitem{
							display: inline-block;
							margin-right: 20upx;
							color: #333333;
							.iconfont{
								margin-right: 10upx;
							}
							&.on{
								color: #ff4a4a;
							}
						}
					}
					.post-footer{
						margin-top: 20upx;
						background-color: #f3f3f5;
						width: 100%;
					}
					.footer_content {
						padding:6upx 20upx;
						position: relative;
						display: -webkit-box;
						display: -webkit-flex;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-align: center;
						-webkit-align-items: center;
						-ms-flex-align: center;
						align-items: center;
						-webkit-flex-wrap: wrap;
						-ms-flex-wrap: wrap;
						flex-wrap: wrap;
						border-bottom:2upx solid #ededed;
					}
					
					.footer_content .nickname {
						color: #36648B;
						font-size: 24upx;
						margin-left:10upx;
					}
					
					.footer_content .comment-nickname {
						color: #36648B;
						font-size: 24upx
					}
					
					.footer_content .comment-content {
						color: #000000;
						font-size: 24upx
					}
				}
			}
		}
	}
</style>
